<template>
	<view>
		<!-- 头部 -->
		<view class="flex-alignItems-center header-out-view" @click="goLoginOut">
			<template v-if="userinfo.userId">
				<view class="fontSize-14 color-000">
					欢迎您 {{userinfo.account}}
				</view>
			</template>
			<template v-else>
				<view class="fontSize-14 color-000">
					未登录
				</view>
			</template>
			<image class="img-38 margin-left20 img-crisp-edges" src="../../static/image/out.png" mode=""></image>
		</view>
		<view class="header-view">
			<u-swiper :list="bannerList" interval="10000" height="250" radius="0" :indicator="true"
				indicatorMode="dot"></u-swiper>
			<template v-if="userinfo.userId">
				<view class="header-message-view" @click="handleChooseLocation">
					<view class="flex-alignItems-center">
						<u-icon name="map" color="#ffffff" size="16"></u-icon>
						<view class="fontSize-13 color-fff margin-left10">{{niaddress}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="header-message-view" @click="$tools.navigateTo('/pages/login/login')">
					<view class="flex-alignItems-center">
						<u-icon name="map" color="#ffffff" size="16"></u-icon>
						<view class="fontSize-13 color-fff margin-left10">{{niaddress}}8号</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 内容 -->
		<view class="padding-30">
			<view class="tips flex" style="margin-bottom: 50rpx;" v-if="warningStatus == 1">
				<image class="tips-view-image" src="../../static/image/02.png" mode=""></image>
				<swiper class="notice-swiper" circular :autoplay="true" :interval="3000" :duration="500" :vertical="true">
					<swiper-item v-for="(item,index) in noticeBarList" :key="index">
						<view class="notice-swiper-item flex-center">{{item}}</view>
					</swiper-item>
				</swiper>
				<!-- <u-notice-bar class="noticeBar" direction="column" :text="noticeBarList" color="#000000" bgColor="#ffffff"></u-notice-bar> -->
			</view>
			<!-- 金刚区 -->
			<view class="flex-alignItems-center margin-bottom30 margin-top30">
				<view class="grid-item flex-justAliCenter-column" style="background: #DCEFF6;margin-right: 13rpx;"
					@click="goToUrl(1)">
					<image class="img-100 margin-bottom10" style="margin-top: -80rpx;" src="../../static/image/03.png"
						mode=""></image>
					<view class="fontSize-16 color-000">风险点</view>
				</view>
				<view class="grid-item flex-justAliCenter-column" style="background: #FEF1F1;margin-right: 13rpx;"
					@click="goToUrl(2)">
					<image class="img-100 margin-bottom10" style="margin-top: -80rpx;" src="../../static/image/04.png"
						mode=""></image>
					<view class="fontSize-16 color-000">监测</view>
				</view>
				<view class="grid-item flex-justAliCenter-column" style="background: #E5EBFB;" @click="goToUrl(3)">
					<image class="img-100 margin-bottom10" style="margin-top: -80rpx;" src="../../static/image/05.png"
						mode=""></image>
					<view class="fontSize-16 color-000">采集</view>
				</view>
			</view>
			<!-- 天气 -->
			<view class="weather-view margin-bottom30">
				<view class="fontSize-15 color-fff margin-bottom10">{{niaddress}}</view>
				<view class="flex margin-bottom10">
					<view class="color-fff fontWeight-bold margin-right10" style="font-size: 36px;">
						{{weather.temperature}}</view>
					<view class="margin-top10">
						<view class="fontSize-15 color-fff">℃</view>
						<!-- <view class="fontSize-15 color-fff">多云</view> -->
					</view>
				</view>
				<view class="flex-alignItems-center margin-bottom20">
					<view class="flex-alignItems-center margin-right20">
						<image class="img-44 margin-right30" src="../../static/image/07.png" mode=""></image>
						<view class="fontSize-15 color-fff">
							<text>降雨量</text>
							<text>{{weather.precipitation}}mm</text>
						</view>
					</view>
					<view class="flex-alignItems-center">
						<image class="img-44 margin-right10" src="../../static/image/08.png" mode=""></image>
						<view class="fontSize-15 color-fff">
							<text>{{weather.windxiang}}</text>
							<text>{{weather.wind}}</text>
						</view>
					</view>
				</view>
				<view class="f-divider1"></view>
				<view class="flex-between margin-20-0">
					<view class="fontSize-16 color-fff">近7天</view>
					<view class="fontSize-13 color-fff">
						<text class="margin-right20">温度 ℃</text>
						<text>降水量 mm</text>
					</view>
				</view>
				<view class="bg-fff padding-20 border-radius10">
					<view class="flex">
						<view class="weather-item flex-justAliCenter-column" v-for="(item,index) in weatherList"
							:key="index">
							<view class="fontSize-13 margin-bottom10" style="color: #707070;">{{item.date}}</view>
							<view class="fontSize-10 color-000 margin-10-0">{{item.temperature}}℃</view>
							<view class="weather-icon margin-bottom10">
								<view class="weather-icon-item" :style="{height:item.progress+'rpx'}"></view>
							</view>
							<view class="fontSize-10 color-000">{{item.precipitation}}mm</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 科普知识 -->
			<view class="kepulist-title-view margin-bottom30">
				<image class="kepulist-image" src="../../static/image/09.png" mode=""></image>
				<view class="kepulist-title"></view>
			</view>
			<view class="bg-fff padding-20 border-radius10 margin-bottom20">
				<view class="flex-alignItems-center margin-bottom20">
					<view class="kefu-icon flex-justAliCenter-column margin-right20">
						<u-icon name="file-text" color="#ffffff" size="16"></u-icon>
					</view>
					<view class="fontSize-18 color-000 fontWeight-bold">泥石流</view>
				</view>
				<view class="fontSize-13 color-000" style="line-height: 1.8;">
					泥石流是暴雨、洪水将含有沙石且松软的土质山体经饱和稀释后形成的洪流，典型的泥石流由悬浮着粗大固体碎屑物并富含粉砂及粘土的粘稠泥浆组成。
				</view>
				<view class="fontSize-13 color-000" style="line-height: 1.8;">
					泥石流是暴雨、洪水将含有沙石且松软的土质山体经饱和稀释后形成的洪流，典型的泥石流由悬浮着粗大固体碎屑物并富含粉砂及粘土的粘稠泥浆组成。
				</view>
			</view>
			<view class="bg-fff padding-20 border-radius10 margin-bottom20">
				<view class="flex-alignItems-center margin-bottom20">
					<view class="kefu-icon flex-justAliCenter-column margin-right20">
						<u-icon name="file-text" color="#ffffff" size="16"></u-icon>
					</view>
					<view class="fontSize-18 color-000 fontWeight-bold">泥石流</view>
				</view>
				<view class="fontSize-13 color-000" style="line-height: 1.8;">
					泥石流是暴雨、洪水将含有沙石且松软的土质山体经饱和稀释后形成的洪流，典型的泥石流由悬浮着粗大固体碎屑物并富含粉砂及粘土的粘稠泥浆组成。
				</view>
				<view class="fontSize-13 color-000" style="line-height: 1.8;">
					泥石流是暴雨、洪水将含有沙石且松软的土质山体经饱和稀释后形成的洪流，典型的泥石流由悬浮着粗大固体碎屑物并富含粉砂及粘土的粘稠泥浆组成。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [
					'http://36.137.213.253:10050/fileServer/slopenew/-/2024/12/e73b350b-b022-4a99-9bc0-9ba407d25b30.png',
					'http://36.137.213.253:10050/fileServer/slopenew/-/2024/12/c9042e56-4f59-4c5d-b48b-213b89e3dbc2.png',
				], // 轮播图
				noticeBarList: [], // 跑马灯
				userinfo: {}, // 用户信息
				location: {}, // 定位
				address: '', // 地址
				niaddress: '', // 逆解析地址
				niaddressCode: '', //逆解析城市编码 
				weather: {}, // 今日天气
				weatherList: [], //近7天数据
				warningStatus: 0 // 预警状态  0 否 1 是
			}
		},
		onLoad() {
			if (uni.getStorageSync('userinfo')) {
				this.userinfo = uni.getStorageSync('userinfo')
				// 有权限获取定位,比较邮政编码,没有权限,固定浙江省省人民政府
				if (this.userinfo.manageRegion) {
					this.getLocation()
				} else {
					this.location = {
						lat: 30.259288,
						lng: 120.130306
					}
					this.getMapCode(this.location)
					uni.setStorageSync('location',this.location)
				}
			} else {
				this.userinfo = {}
				this.location = {
					lat: 30.259288,
					lng: 120.130306
				}
				this.getMapCode(this.location)
				uni.setStorageSync('location',this.location)
			}
			this.getWeather()
			this.getWeatherList()
			this.getdeviceWarn()
		},
		methods: {
			// 退出
			goLoginOut() {
				uni.clearStorageSync()
				// this.$tools.navigateTo('/pages/login/login')
				this.$tools.redirectTo('/pages/login/login')
			},
			// 选择定位
			handleChooseLocation() {
				this.$wxApi.getchooseLocation().then(data => {
					this.location = {
						lat: data.latitude,
						lng: data.longitude
					}
					// uni.setStorageSync('location',this.location)
					uni.setStorageSync('location',this.location)
					this.getMapCode(this.location, 1)
				})
			},
			// 获取定位
			getLocation() {
				this.$wxApi.wxgetFuzzyLocation().then(data => {
					this.location = {
						lat: data.latitude,
						lng: data.longitude
					}
					uni.setStorageSync('location',this.location)
					this.getMapCode(this.location, 1)
				})
			},
			// 逆地址解析
			getMapCode(location, type) {
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=YQ5BZ-5Z5LW-TKTRA-3TRPZ-OI6LH-52BJD&get_poi=1&location=' +
						location.lat + ',' + location.lng,
					header: {
						'custom-header': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						console.log(res.data, 111)
						// 有权限省外，否则省内权限
						if (type == 1) {
							let adcode = res.data.result.ad_info.adcode.substring(0, 2)
							let manageRegion = this.userinfo.manageRegion.substring(0, 2)
							if (adcode == manageRegion) {
								this.niaddressCode = res.data.result.ad_info.adcode
								this.niaddress = res.data.result.address
							} else {
								this.niaddressCode = this.userinfo.manageRegion
								this.niaddress = this.userinfo.manageRegionLabel
								this.location = {
									lat: 30.259288,
									lng: 120.130306
								}
								uni.setStorageSync('location',this.location)
							}
						} else {
							this.niaddressCode = res.data.result.ad_info.adcode
							this.niaddress = res.data.result.address
						}
					}
				});
			},
			// 跑马灯信息
			async getdeviceWarn() {
				let res = await this.$http.get(this.$api.deviceWarn, {}, {
					token: true
				})
				console.log(res)
				let arr = []
				res.data.forEach(item => {
					arr.push(item.text)
				})
				this.noticeBarList = arr
			},
			// 获取今日天气,预警
			getWeather() {
				uni.request({
					url: 'https://api.caiyunapp.com/v2.6/vRxEkriIsadOdgac/101.6656,39.2072/daily?dailysteps=1&alert=true', //仅为示例，并非真实接口地址。
					header: {
						'custom-header': 'application/json;charset=UTF-8' //自定义请求头信息
					},
					success: (res) => {
						this.weather = {
							precipitation: res.data.result.daily.precipitation[0].avg, //降水量
							temperature: res.data.result.daily.temperature[0].avg, // 温度
							wind: this.$pppBilce.windSpeed(res.data.result.daily.wind[0].avg.speed), //风速
							windxiang: this.$pppBilce.windDirection(res.data.result.daily.wind[0].avg
								.direction), //风向
						}
						// 判断该地区是否存在预警
						res.data.result.alert.adcodes.forEach(item => {
							if (item.adcode == this.niaddressCode) {
								this.warningStatus = 1
							} else {
								this.warningStatus = 0
							}
						})
					}
				});
			},
			// 获取近7天气
			getWeatherList() {
				uni.request({
					url: 'https://api.caiyunapp.com/v2.6/vRxEkriIsadOdgac/101.6656,39.2072/daily?dailysteps=7&alert=true', //仅为示例，并非真实接口地址。
					header: {
						'custom-header': 'application/json;charset=UTF-8' //自定义请求头信息
					},
					success: (res) => {
						let arr = []
						res.data.result.daily.precipitation.forEach((item, index) => {
							arr.push({
								date: item.date.substring(5, 10),
								precipitation: item.avg.toFixed(2),
								temperature: res.data.result.daily.temperature[index].avg,
								progress: item.probability * 100
							})
						})
						this.weatherList = arr
					}
				});
			},
			// 跳转到风险点
			goToUrl(value) {
				if (!uni.getStorageSync('token')) {
					return this.$tools.redirectTo('/pages/login/login')
				}
				if (value == 1) {
					this.$tools.navigateTo('/pages/risk-points/risk-points')
				}
				if (value == 2) {
					this.$tools.navigateTo('/pages/monitor/monitor')
				}
				if (value == 3) {
					this.$tools.navigateTo('/pages/data-acquisition/data-acquisition')
				}
			},
			// 未授权获取定位坐标

		}
	}
</script>

<style lang="scss" scoped>
	.tips-view-image {
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
	
	.tips {
		padding: 20rpx;
		overflow: hidden;
		background-color: #ffffff;
		border-radius: 10rpx;
	}
	.notice-swiper-item{
		// height: 100rpx;
		flex: 1;
		font-size: 12px;
		color: #000000;
	}
	.notice-swiper{
		background-color: #ffffff;
		border-radius: 10rpx;
		// padding: 20rpx;
		height: 100rpx;
		flex: 1;
	}
	.noticeBar {
		height: 100rpx;
	}

	.header-out-view {
		padding: 30rpx;
		margin-top: 80rpx;
		overflow: hidden;
	}

	.kefu-icon {
		width: 48rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 50%;
		background-color: #6C80F7;
	}

	// 科普知识列表
	.kepulist-image {
		width: 100%;
		height: 100%;
		flex-shrink: 0;
	}

	.kepulist-title-view {
		width: 100%;
		height: 80rpx;
	}

	// 天气
	.weather-icon-item {
		width: 100%;
		// height: 40rpx;
		background-color: #93CCF9;
		border-radius: 30rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.weather-icon {
		width: 15rpx;
		height: 100rpx;
		background-color: #F3F3F3;
		border-radius: 30rpx;
		position: relative;
	}

	.weather-item {
		flex: 1;
	}

	.weather-view {
		width: 94%;
		height: 590rpx;
		flex-shrink: 0;
		padding: 20rpx;
		background: url('https://survey.chunchuangkeji.cn/images/06.png') no-repeat;
		background-size: 100% 100%;
	}

	// 金冈区
	.grid-item {
		width: 220rpx;
		height: 140rpx;
		box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.18);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}

	.header-view {
		position: relative;
	}

	.header-message-view {
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		padding: 20rpx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
	}
</style>